<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <h2>1、Html 代码</h2>
    <div class="t1">1</div>
    <div class="t2">2</div>
    <div class="t1">1</div>
    <div class="t2">2</div>

    <hr />

    <h2>2、新元素</h2>
    <div class="t3">3</div>
    <div class="t4">4</div>
    <div class="t3">3</div>
    <div class="t4">4</div>

    <hr />

    <h2>3、新元素</h2>
    <div class="existed">已存在元素1</div>
    <div class="existed">已存在元素2</div>
    <div class="existed">已存在元素3</div>
    <div class="existed">已存在元素4</div>
    <div class="t5">5</div>
    <div class="t6">6</div>
    <div class="t5">5</div>
    <div class="t6">6</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(() => {
        /**
         * @brief: 某些内容 替换到 被选元素
         * @param {} content 替换元素
         * (1) HTML 代码；
         * (2) 新元素；例如 document.createElement('div')
         * (3) 已存在的元素消失，去替换要替换的元素；
         * @param {} selector 必须参数，被选内容
         * @return {*}
         */
        // $(content).replaceAll(selector)

        // 1、HTML 代码
        $('<div>x</div>').replaceAll($('.t2'))

        // 2、新元素
        let myY = document.createElement('div')
        myY.innerHTML = '元素的文本'
        $(myY).replaceAll($('.t4'))

        // 3、已存在的元素
        $('.existed').replaceAll($('.t6'))
      })
    </script>
  </body>
</html>
